<template>
  <div class="app-main">
    <!-- 使用组件 -->
    <my-header :title="title"></my-header>
    <my-goods 
    v-for="item in list" 
    :key="item.id"
    :goods="item"
    ></my-goods>
    <my-footer :list="list"></my-footer>
  </div>
</template>

<script>
// 引入组件
import MyHeader from './components/MyHeader.vue'
import MyGoods from './components/MyGoods.vue'
import MyFooter from './components/MyFooter.vue'

export default {
    components: {
      // 注册组件
      MyHeader,
      MyGoods,
      MyFooter
    },
    data() {
      return {
        title: '购物车案例',
        // 注意要写默认值 空数组 页面打开就开始渲染取值
        list: []
      }
    },
    // 在 Vue 实例添加完 data methods 这些方法后发起 Ajax 请求
    created() {
      this.$http({
        // get 请求默认方式 可不写method
        url: '/api/cart'
      }).then(res => {
        // console.log(res.data.list);
        this.list = res.data.list
      })
    }
}
</script>

<style lang="less">
.app-main {
  padding: 45px 0 50px 0;
}

</style>